<style lang="less">
.card_style {
  height: 100%;
  width: 100%;
  overflow: hidden;
  .ivu-card-body {
    padding: 0px;
  }
}
.page_style {
  margin-top: 10px;
  text-align: right;
}
.search-info-style {
  margin: 10px;
}
.nopadding .ivu-table-cell {
  padding: 0px 0px;
}
.title {
  text-align: center;
  font-size: 1.5rem;
  padding: 20px;
}
.notice-name {
  line-height: 2.5;
  margin-top: 6%;
}
.notice-context {
  text-indent: 2em;
  line-height: 2.5;
}
.notice-content1 {
  padding: 0 4% 0 12%;
  position:relative;
}
.notice-address {
  text-align: right;
  margin-top: 10%;
}
.notice-date {
  text-align: right;
}
.text-line {
  border-color: #878787;
  border-style: solid;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  border-left-width: 0px;
  text-align: center;
}
.text-line-date {
  border-color: #878787;
  border-style: solid;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  border-left-width: 0px;
  width: 10%;
  text-align: center;
}
.text-line-address {
  border-color: #878787;
  border-style: solid;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  border-left-width: 0px;
  width: 15%;
  text-align: center;
}
.print-btn {
  padding: 15px;
  float: right;
}
.code-img2 {
  height: 120px;
  width: 120px;
  top: 70%;
  left: 4%;
  position: absolute;
}
.code-img1 {
  height: 60%;
  width: 90%;
  margin-left: 5%;
}
.centerimg {
  text-align: center;
}
.pre_img_style {
  height:500px;
  width:auto;
  max-width: 500px;
}
.new-btn-sty {
  margin-right: 5px;
  color: #fff;
  background-color: #235CA7;
  border-color: #235CA7;
  font-weight: 500;
}
</style>
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
      <div>
        <Row class="search-info-style">
          <Col span="6">
            <span>申请人：</span>
            <Input style="width: 70%;" v-model="searchInfo.applyname" />
          </Col>
          <Col span="6">
            <span>业务编号：</span>
            <Input style="width: 70%;" v-model="searchInfo.order_code" />
          </Col>
          <Col span="6">
            <span>申请时间：</span>
            <DatePicker type="datetimerange" format="yyyy/MM/dd" transfer="" placement="bottom-end"
                        style="width: 70%" v-model="searchInfo.applytime"></DatePicker>
          </Col>
          <Button class="new-btn-sty" @click="searchData(tabInfoAll.tabIndex)">
            <Icon type="ios-clock-outline" /> 刷新
          </Button>
          <Button class="new-btn-sty" @click="searchData(tabInfoAll.tabIndex)">
            <Icon type="ios-search" /> 搜索
          </Button>
        </Row>
        <Row class="search-info-style">
          <Col span="6">
            <span>业务部门：</span>
            <Select v-model="searchInfo.department_name" style="width:65%">
              <Option v-for="(item,index) in departmentList" :value="item.name" :key="index">{{ item.name }}</Option>
            </Select>
          </Col>
        </Row>
        <Table border :columns="columns1" :data="datalist" >
          <template slot-scope="{ row, index }" slot="item_title">
            <span v-if="row.state == '1' || row.state == '7'">
              <Icon type="md-alarm" style="color: #19be6b"/>
            </span>
            <span>{{row.title}}</span>
          </template>
          <template slot-scope="{ row, index }" slot="time">
            <span v-if="row.state == '1' || row.state == '81'">
              <span>{{time(row.item_time)}}</span>
            </span>
            <span v-if="row.state == '2' || row.state == '3'">
              <span v-if="row.item_num==NaN">
                0时0分0秒
              </span>
              <span v-else>{{times(row.item_num/60)}}</span>
            </span>
            <span v-if="row.state == '9' || row.state == '0'|| row.state == '7'|| row.state=='8'">
              <span>0时0分0秒</span>
            </span>
          </template>
        </Table>
        <Row v-if="loadData == true">
          <Col class="demo-spin-col" span="8" offset="8">
            <Spin fix>
              <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
              <div>数据正在加载</div>
            </Spin>
          </Col>
        </Row>
        <Page class="page_style" :total="searchInfo.totalnum" :current="searchInfo.currentPageNo"
              :page-size="searchInfo.currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size"/>
      </div>
</template>

<script>
import {
  date2str,
  itemTypeList,
  sendReminders, overtimeOrderList } from '@/api/eventlist'
export default {
  data () {
    return {
      departmentList: [],
      today: new Date().getTime(),
      searchInfo: {
        order_code: '',
        currentPageNo: 1,
        currentPageSize: 10,
        department_name: ''
      },
      tabInfoAll: {
        tabIndex: 0,
        listIndex: { a0: 2, a1: 3, a2: 6, a3: 7, a7: 5, a8: 4, a81: 4, a82: 4, a9: 1 },
        list: [
          { id: '1', tab_name: '全部', count: 0, state: null },
          { id: '2', tab_name: '待提报', count: 0, state: '9' },
          { id: '3', tab_name: '待受理', count: 0, state: '0' },
          { id: '4', tab_name: '办理中', count: 0, state: '1' },
          { id: '5', tab_name: '转件中', count: 0, state: '8,81,82' },
          { id: '6', tab_name: '待办结', count: 0, state: '7' },
          { id: '7', tab_name: '办结成功', count: 0, state: '2' },
          { id: '8', tab_name: '办结失败', count: 0, state: '3' }
        ]
      },
      columns1: [
        {
          title: '事项名称',
          minWidth: 190,
          key: 'title',
          // slot: 'item_title'
          render: (h, params) => {
            let temp = []
            if (params.row.state === '1' || params.row.state === '7') {
              let create_time1 = new Date(params.row.create_time).getTime()
              create_time1 += 86400000 * params.row.PROMISE_DAY
              if ((create_time1 + 86400000 * 3) < this.today) {
                temp.push(h('Icon', { props: { type: 'md-alarm', size: '25' }, style: { color: '#f00' } }))
              } else if (create_time1 < this.today) {
                temp.push(h('Icon', { props: { type: 'md-alarm', size: '25' }, style: { color: '#f90' } }))
              }
            }
            temp.push(h('span', ' \xa0' + params.row.title))
            return h('div', temp)
          }
        },
        { title: '业务编号', key: 'code', width: 150 },
        { title: '申请人', key: 'name', width: 80 },
        { title: '手机号', key: 'mobile_encryption', width: 115 },
        { title: '身份证', key: 'cardno_encryption', width: 160 },
        { title: '状态', key: 'process_name', width: 85, align: 'center', className: 'nopadding' },
        { title: '申请时间', key: 'create_time', width: 140, align: 'center', className: 'nopadding' },
        { title: '办结时长', slot: 'time', width: 140, align: 'center', className: 'nopadding' },
        {
          title: '预计提醒',
          key: 'reminders',
          align: 'center',
          className: 'nopadding',
          minWidth: 70,
          render: (h, params) => {
            let temp = []
            let bottonText = '提醒'
            if (params.row.state === '1' || params.row.state === '7') {
              let create_time1 = new Date(params.row.create_time).getTime()
              create_time1 += 86400000 * params.row.PROMISE_DAY
              // eslint-disable-next-line no-mixed-operators
              if (create_time1 < this.today) {
                if (params.row.remind_state !== '0') {
                  bottonText = '重新提醒'
                }
                temp.push(h('Button', {
                  props: { type: 'info', size: 'small' },
                  style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px', backgroundColor: '#235CA7', borderColor: '#235CA7' },
                  on: {
                    click: () => {
                      if ((create_time1 + 86400000 * 3) < this.today) {
                        let data = {
                          type: 'red',
                          code: params.row.code
                        }
                        sendReminders(data).then(ret => {
                          if (ret.data.errcode === 0) {
                            this.init({ 'state': 1 })
                          } else {
                            this.$Notice.error({
                              title: '提醒失败',
                              desc: ret.data.errmsg
                            })
                          }
                        })
                      } else if (create_time1 < this.today) {
                        let data = {
                          type: 'yellow',
                          code: params.row.code
                        }
                        sendReminders(data).then(ret => {
                          if (ret.data.errcode === 0) {
                            this.init({ 'state': 1 })
                          } else {
                            this.$Notice.error({
                              title: '提醒失败',
                              desc: ret.data.errmsg
                            })
                          }
                        })
                      }
                    }
                  }
                }, bottonText)
                )
              }
            }
            return h('div', temp)
          }
        }
      ],
      datalist: [],
      modalInfo: {},
      company_list: []
    }
  },
  computed: {
    address () {
      return this.$store.state.user.severUserInfo.company_name
    },
    companyCode () {
      return this.$store.state.user.severUserInfo.company_code
    }
  },
  methods: {
    size (pageSize) {
      this.searchInfo.currentPageSize = pageSize
      this.changePageNo()
    },
    times (date) {
      if (date === undefined || date === null || date === '') {
        return '0时0分0秒'
      }
      if (date < 0) {
        return '0时0分0秒'
      }
      let time = date * 60
      let min = Math.floor(time % 3600)
      return Math.floor(time / 3600) + '时' + Math.floor(min / 60) + '分' + Math.floor(time / 60) + '秒'
    },
    time (date) {
      if (date === undefined || date === null || date === '') {
        return '0时0分0秒'
      }
      let timestamp1 = new Date(date).getTime()
      let timestamp2 = new Date().getTime()
      let staytimeGap = timestamp2 - timestamp1
      if (staytimeGap < 0) {
        return '0时0分0秒'
      }
      let stayHour = Math.floor(staytimeGap / (3600 * 1000))
      let leave1 = staytimeGap % (3600 * 1000)
      let stayMin = Math.floor(leave1 / (60 * 1000))
      let leave2 = leave1 % (60 * 1000)
      let staySec = Math.floor(leave2 / 1000)
      return stayHour + '时' + stayMin + '分' + staySec + '秒'
    },
    // 查询订单列表接口
    init (param) {
      param.pageNo = this.searchInfo.currentPageNo
      param.pageSize = this.searchInfo.currentPageSize
      overtimeOrderList(param).then(res => {
        if (res.data.data) {
          this.datalist = res.data.data.results
          this.searchInfo.totalnum = res.data.data.totalRecord
          let that = this
          this.datalist.forEach(function (temp1, index) {
            temp1._expanded = false
            if (temp1.mobile) {
              if (temp1.mobile.length === 8 || temp1.mobile.length === 7) {
                temp1.mobile_encryption = temp1.mobile.substring(0, 3) + '****' + temp1.mobile.substring(6)
              } else if (temp1.mobile.length === 11) {
                temp1.mobile_encryption = temp1.mobile.substring(0, 3) + '****' + temp1.mobile.substring(7)
              } else {
                temp1.mobile_encryption = temp1.mobile
              }
            }
            if (temp1.cardno) {
              temp1.cardno_encryption = temp1.cardno.substring(0, 6) + '********' + temp1.cardno.substring(14)
            }
            if (temp1.state === '1' || temp1.state === '7') {
              console.log(temp1.PROMISE_DAY, 'PROMISE_DAY')
              // 距离订单超时的时间差 = 订单理论结束时间 - 当前时间
              let timediff = temp1.createtimestamp + 86400000 * temp1.PROMISE_DAY - that.today
              console.log(timediff, 'timediff')
              if (timediff < 0) {
                temp1.timeout = 3
              }
            }
          })
          this.loadData = false
        } else {
          this.loadData = true
          this.$Notice.error({ title: '获取事项办理列表失败', desc: res.data.errmsg })
        }
      })
    },
    // 切换tab页和搜索，刷新按钮
    searchData (tabIndex) {
      let params = {
        name: this.searchInfo.applyname,
        code: this.searchInfo.order_code,
        state: this.tabInfoAll.list[tabIndex].state,
        department_name: this.searchInfo.department_name
      }
      if (this.searchInfo.applytime[0]) params.start_time = date2str(this.searchInfo.applytime[0])
      if (this.searchInfo.applytime[1]) params.end_time = date2str(this.searchInfo.applytime[1])
      this.searchInfo.currentPageNo = 1
      this.init(params)
    },
    // 切换页码
    changePageNo (pageNo) {
      console.log(pageNo)
      this.searchInfo.currentPageNo = pageNo
      let params = {
        name: this.searchInfo.applyname,
        state: this.tabInfoAll.list[this.tabInfoAll.tabIndex].state
      }
      if (this.searchInfo.applytime[0]) params.start_time = date2str(this.searchInfo.applytime[0])
      if (this.searchInfo.applytime[1]) params.end_time = date2str(this.searchInfo.applytime[1])
      this.init(params)
    },
    itemTypeList () {
      let data = {
        show_state: 'pc%'
      }
      itemTypeList(data).then(ret => {
        this.departmentList = ret.data.data
      })
    }
  },
  mounted () {
    this.init({ 'state': null })
    this.itemTypeList()
  }
}
</script>
